<template>
	<view class="centerShopOrders">
		<view class="centerShopOrders-head">
			<view class="centerShopOrders-head-box" @click="cli_head(item, index)"
				:class="[index_head == index? 'colorOK': '']" v-for="(item, index) of list_head" :key="index">
				<text class="centerShopOrders-head-box-txt">{{item}}</text>
				<text class="centerShopOrders-head-box-img" :class="[index_head == index? 'btmok': '']"></text>
			</view>
		</view>
		<view class="centerShopOrders-main" v-if="list.length > 0">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="centerShopOrders-main-li" @click="cli_next(item, index)" v-for="(item,index) in list" :key="index">
					<view class="centerShopOrders-main-li-time">
						下单时间：{{item.createTime}}
					</view>
					<view class="centerShopOrders-main-li-cen">
						<view class="centerShopOrders-main-li-cen-left">
							<image class="centerShopOrders-main-li-cen-left-img" :src=item.storeImage mode=""></image>
						</view>
						<view class="centerShopOrders-main-li-cen-right">
							<view class="centerShopOrders-main-li-cen-right-top font_blod">
								<text>{{item.storeName}}</text>
								<text style="margin-left: 24rpx;">{{item.orderPhone}}</text>
							</view>
							<view class="centerShopOrders-main-li-cen-tight-btm">
								{{item.orderAddress}}
							</view>
						</view>
					</view>
					<view class="centerShopOrders-main-li-btn" v-if="item.orderState == 1 || item.orderState == 2">
						<view class="centerShopOrders-main-li-btn-state csoState">
							待发货
						</view>
						<view class="centerShopOrders-main-li-btn-right font_blod" @click="cli_next(item, index)">
							去发货
						</view>
					</view>
					<view class="centerShopOrders-main-li-btn" v-if="item.orderState == 3">
						<view class="centerShopOrders-main-li-btn-state csoState">
							已发货
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="" v-else>
			<view class="yPopNone" style="margin-top: 20%;">
				<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode="">
				</image>
				<view class="yPopNoneTxt">
					暂无订单~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				list_head: ['全部', '待发货', '已发货'],
				scrollTop: 0,
				index_head: 0,
				pageNum: 1,
				showMore: true,
				list: []
			}
		},
		onLoad(val) {
			this.index_head = val.indexHead
		},
		onShow() {
			this.pageInit()
		},
		methods: {
			// 头部导航
			cli_head(item, index) {
				this.index_head = index
				this.pageInit()
			},
			// 初始化数据
			pageInit () {
				this.showMore = true
				this.pageNum = 1
				this.list = []
				this.getStorePartsOrderListByAgentId()
			},
			// 上拉刷新下拉加载
			upper: function(e) {
				console.log(e)
				this.pageInit()
			},
			lower: function(e) {
				console.log(e)
				if (this.showMore) {
					this.pageNum += 1
				}
			},
			scroll: function(e) {
				// console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
			},
			// 点击按钮
			cli_next(item, index) {
				uni.navigateTo({
					url: '/pages/centerShopOrdersNext/centerShopOrdersNext?id=' + item.id
				})
			},
			// 获取店铺订单列表
			getStorePartsOrderListByAgentId() {
				let index_head = this.index_head
				let orderState = ''
				if (index_head == 0) {
					orderState = ''
				} else if (index_head == 1) {
					orderState = 1
				} else if (index_head == 2) {
					orderState = 3
				}

				uni.request({
					url: allapi.getStorePartsOrderListByAgentId,
					data: {
						agentId: this.agentId,
						orderState: orderState,
						pageNum: this.pageNum,
						pageSize: 10
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						if (dat && dat.length > 0) {
							this.showMore = true
							this.list = this.list.concat(dat)
						}else {
							this.showMore = false
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style scoped>
	.centerShopOrders {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}

	.centerShopOrders-head {
		height: 96rpx;
		background: #FFFFFF;
		display: flex;
		padding: 0 40rpx;
	}

	.centerShopOrders-head-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 66rpx;
	}

	.colorOK {
		color: #28CD50;
		font-weight: bold;
	}

	.centerShopOrders-head-box-txt {
		font-size: 28rpx;
		flex: 1;
		display: flex;
		align-items: center;
	}

	.centerShopOrders-head-box-img {
		width: 70rpx;
		display: block;
		height: 8rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	.btmok {
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
	}

	.centerShopOrders-main {
		flex: 1;
		overflow: auto;
		margin: 0 24rpx;
	}

	.centerShopOrders-main-li {
		margin: 24rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
	}

	.centerShopOrders-main-li-time {
		border-bottom: 1rpx solid #EEEEEE;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		padding-bottom: 24rpx;
	}

	.centerShopOrders-main-li-cen {
		display: flex;
		padding: 16rpx 0rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.centerShopOrders-main-li-cen-left-img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		background: #CCCCCC;
	}

	.centerShopOrders-main-li-cen-right {
		margin-left: 24rpx;
	}

	.centerShopOrders-main-li-cen-right-top {
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.centerShopOrders-main-li-cen-tight-btm {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		margin-top: 8rpx;
	}

	.centerShopOrders-main-li-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.centerShopOrders-main-li-btn-state {
		font-size: 28rpx;
		font-weight: 400;
		color: #F9AE46;
	}

	.csoState {
		color: #38B656;
	}

	.centerShopOrders-main-li-btn-right {
		width: 164rpx;
		height: 64rpx;
		line-height: 68rpx;
		background: #EFFBE4;
		border-radius: 34rpx;
		border: 2rpx solid #28CD50;
		text-align: center;
		font-size: 24rpx;
		color: #28CD50;
	}
	.scroll-Y {
		height: 100%;
	}
</style>
